<template>
  <div>
    <aty-row>
      <aty-row>
        <aty-title level="4">1. 多层嵌套</aty-title>
        <aty-button type="primary" @click="modalPage2">显示对话框</aty-button>
        <aty-modal title="第一层框" ok-text="打开二级窗口" cancel-text="关闭" ref="modalWidiow1" width="1500" @on-ok="onOk1" @cancel="onCancel1">
          <aty-iframe src="http://www.baidu.com" height="600px"></aty-iframe>
        </aty-modal>
        <aty-modal title="第二次框" width="600px" ref="modalWidiow2" ok-text="打开三级窗口" cancel-text="关闭" @on-ok="onOk2">
          <aty-title text="第二次框" level="3" height="400px"></aty-title>
        </aty-modal>
        <aty-modal title="第三层框" width="400px" ref="modalWidiow3" ok-text="关闭全部窗口" cancel-text="关闭" @on-ok="onOk3">
          <aty-title text="第三层框" level="3"></aty-title>
        </aty-modal>
      </aty-row>

      <aty-row>
        <aty-title level="4">2. 加载状态</aty-title>
        <aty-button type="primary" @click="$refs.editWidiow4.open()">显示对话框</aty-button>
        <aty-modal title="加载状态" ref="editWidiow4" loading :before-close="handleClose" width="80%" body-height="800px" top="20px" refreshContent>
          <aty-iframe src="http://www.baidu.com" className="iframe" />
        </aty-modal>
      </aty-row>
      <aty-row>
        <aty-title level="4">3. 隐藏底部</aty-title>
        <aty-button type="primary" @click="$refs.editWidiow5.open()">显示对话框</aty-button>
        <aty-modal title="隐藏底部" ref="editWidiow5" :before-close="handleClose" top="20px" footer-hide refreshContent>
          <aty-iframe src="http://www.baidu.com" className="iframe" />
        </aty-modal>
      </aty-row>`

      <aty-row>
        <aty-title level="4">4. 可滚动</aty-title>
        <aty-button type="primary" @click="scrollableModal" >显示可滚动对话框</aty-button>
        <aty-button type="primary" @click="notScrollableModal" >显示不可滚动对话框</aty-button>
        <aty-modal title="可滚动" ref="editWidiow6" :scrollable="scrollable"  :refreshContent="false">
          <aty-iframe src="http://www.baidu.com" className="iframe"/>
        </aty-modal>
      </aty-row>
      <aty-row>
        <aty-title level="4">5. 异步关闭</aty-title>
        <aty-button type="primary" @click="$refs.editWidiow7.open()"  >显示对话框</aty-button>
        <aty-modal title="异步关闭" ref="editWidiow7" refreshContent :transfer="true" loading @on-ok="asyncOK">
          <p>点击确定后，对话框将在 2秒 后关闭。</p>
        </aty-modal>
      </aty-row>
      <aty-row>
        <aty-title level="4">6. refreshContent</aty-title>
        <aty-button type="primary" @click="$refs.editWidiow8.open()"  >refreshContent</aty-button>
        <aty-modal title="with refreshContent" ref="editWidiow8" :refreshContent="true">
          <aty-form inline ref="form" :data="user">
            <aty-input icon="ios-person-outline" placeholder="Username"></aty-input>
            <aty-input icon="ios-locked-outline" placeholder="Password" type="password"></aty-input>
          </aty-form>
        </aty-modal>
        <aty-button type="primary" @click="$refs.editWidiow9.open()"  >not refreshContent</aty-button>
        <aty-modal title="with not refreshContent" ref="editWidiow9" :refreshContent="false">
          <aty-form inline ref="form" :data="user">
            <aty-input icon="ios-person-outline" placeholder="Username"></aty-input>
            <aty-input icon="ios-locked-outline" placeholder="Password" type="password"></aty-input>
          </aty-form>
        </aty-modal>
      </aty-row>
    </aty-row>

  </div>
</template>
<script>
  export default {
    data () {
      return {
        user:{},
        visible: false,
        visible2: false,
        visible3: false,
        scrollable: false,
      }
    },
    methods: {
      modalPage2: function(url) {
        this.$refs.modalWidiow1.open();
      },
      onOk1: function() {
        Artery.message.success("点击了确认按钮")
        //执行业务逻辑
        this.$refs.modalWidiow2.open()
      },
      onCancel1: function() {
        Artery.message.info("点击了取消按钮")
      },
      onOk2: function() {
        Artery.message.success("点击了确认按钮")
        //执行业务逻辑
        this.$refs.modalWidiow3.open();
      },
      onOk3: function() {
        Artery.message.success("点击了确认按钮")
        //执行业务逻辑
        this.$refs.modalWidiow3.close()
        this.$refs.modalWidiow2.close()
        this.$refs.modalWidiow1.close()
      },
      handleClose (done) {
        alert('关闭回调~')
        done()
      },
      asyncOK () {
        let _this = this
        setTimeout(() => {
          _this.$refs.editWidiow7.close()
        }, 2000);
      },
      scrollableModal () {
        this.scrollable = true
        this.$refs.editWidiow6.open()
      },
      notScrollableModal () {
        this.scrollable = false
        this.$refs.editWidiow6.open()
      }
    }
  }
</script>

<style  lang="less"  type="text/less"  scoped>
  .iframe {
    width: 100%;
    height: 100%;
  }
</style>
